<template name="接待详情">
  <div class="gl_heightFull gl_contentBox">
    <div v-loading="receptionLoading" style="line-height: 50px">
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :span="16">
          <span>{{ receptionDetail.departureStation }} -- {{ receptionDetail.arrivalStation }}</span>
        </el-col>
        <el-col :span="8" align="right">
          <span>总金额：</span>
          <span>￥ {{ (receptionDetail.amount / 100).toFixed(2) }} 元</span>
        </el-col>
      </el-row>
    </div>
    <el-divider />
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :md="8" :lg="6">
          <p>接车时间</p>
          <el-date-picker
            v-model="pickUpCarTime"
            type="daterange"
            range-separator="至"
            start-placeholder="请选择日期"
            end-placeholder="请选择日期"
            size="mini"
            value-format="yyyy-MM-dd"
            style="width:100%"
            @change="pickUpCarTimeChange"
          />
        </el-col>
        <el-col :md="8" :lg="6">
          <p>送车时间</p>
          <el-date-picker
            v-model="deliverCarTime"
            type="daterange"
            range-separator="至"
            start-placeholder="请选择日期"
            end-placeholder="请选择日期"
            size="mini"
            value-format="yyyy-MM-dd"
            style="width:100%"
            @change="deliverCarTimeChange"
          />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>预定人/联系方式</p>
          <el-input v-model="form.Filter" placeholder="请输入关键词查询" size="mini" clearable @change="getData()" />
        </el-col>
        <el-col :md="8" :lg="6">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="getData()">查询</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini" @click="reset()">重置</el-button>
          <el-button :loading="buLoading" style="margin-top:27px" type="success" size="mini" @click="exportData()">导出Excel表格</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table ref="receptionTable" v-loading="loading" :data="receptionTable" size="mini">
      <el-table-column type="index" label="序号" :width="50" align="center" />
      <el-table-column label="接送站点" :min-width="160">
        <template slot-scope="{ row }">
          <span>{{ row.departureStation }}</span>
          <span> -- </span>
          <span>{{ row.arrivalStation }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="carType" label="车辆类型" />
      <el-table-column prop="carSeatCode" label="座位数" :width="80">
        <template slot-scope="{ row }">
          <span v-if="row.carSeatCode">
            <template v-for="ktem in dict.carSeatType">
              {{ ktem.code === row.carSeatCode ? ktem.value: '' }}
            </template>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="carColor" label="车辆颜色" :width="80" align="center" />
      <el-table-column prop="pickUpCarTime" label="接车时间" :width="140" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.pickUpCarTime == '0001-01-01T00:00:00' || !row.pickUpCarTime">- -</span>
          <span v-else>{{ row.pickUpCarTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="pickUpCarNumber" label="接车车辆数量" :width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.pickUpCarNumber || '- -' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="picksUpPrice" label="接车价格" :width="80" align="center">
        <template slot-scope="{ row }">
          <span>￥{{ (row.picksUpPrice / 100).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="deliverCarTime" label="送车时间" :width="140" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.deliverCarTime == '0001-01-01T00:00:00' || !row.deliverCarTime">- -</span>
          <span v-else>{{ row.deliverCarTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="deliverCarNumber" label="送车车辆数量" :width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.deliverCarNumber || '- -' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sendsPrice" label="送车价格" :width="80" align="center">
        <template slot-scope="{ row }">
          <span>￥{{ (row.sendsPrice / 100).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="trainNumber" label="车次" :width="80">
        <template slot-scope="{ row }">
          <span>{{ row.trainNumber || '- -' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="receptionName" label="预定人姓名" :min-width="90" />
      <el-table-column prop="receptionPhoneNumber" label="预定人手机号" :width="100" />
      <el-table-column prop="amount" label="总金额">
        <template slot-scope="{ row }">
          <span>￥{{ (row.amount / 100).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
        <template slot-scope="{ row }">
          <span>{{ row.remark || '- -' }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="form.Page"
        :page-size="form.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import {
  api_GET_EventsManagementLogisticsStatisticsSingleReceptionStatisticsReceptionId,
  api_GET_EventsManagementLogisticsStatisticsReceptionDetailStatistics
} from '@/extend/api/gameswaggerApi/app';
import {
  Api_GET_EventsManagementLogisticsStatisticsReceptionDetailStatisticsQO
} from '@/lib/form/game/swaggerForm';
export default {
  name: 'ReceptionDetail',
  data() {
    return {
      loading: false,
      receptionLoading: false,
      buLoading: false,
      totalPage: 0, // 总条目数
      form: new Api_GET_EventsManagementLogisticsStatisticsReceptionDetailStatisticsQO(),
      pickUpCarTime: [],
      deliverCarTime: [],
      receptionDetail: {},
      receptionTable: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.gameId = this.$route.params.id;
    this.getDict();
    this.getReceptionData();
    this.getData();
  },
  methods: {
    // 获取字典
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取接待数据
    getReceptionData() {
      var that = this;
      that.receptionLoading = true;
      api_GET_EventsManagementLogisticsStatisticsSingleReceptionStatisticsReceptionId(that.$route.query.id).then(res => {
        that.receptionDetail = res || {};
        that.receptionLoading = false;
      }).catch(error => {
        that.receptionLoading = false;
        that.$message({ type: 'error', message: error.error && error.error.message || '获取接待信息失败' });
      });
    },
    // 获取表格数据
    getData(page) {
      var that = this;
      that.loading = true;
      that.form.Page = page || 1;
      that.form.SkipCount = (that.form.Page - 1) * that.form.MaxResultCount;
      that.form.ProviderKey = that.gameId;
      that.form.ReceptionId = that.$route.query.id;
      that.form.IncludeReceptionModelOfCar = true;
      that.form.IncludeCarSeatType = true;
      api_GET_EventsManagementLogisticsStatisticsReceptionDetailStatistics(that.form).then(res => {
        that.receptionTable = res.items;
        that.totalPage = res.totalCount;
        that.loading = false;
      }).catch(error => {
        that.loading = false;
        that.$message({ type: 'error', message: error.error && error.error.message || '获取接待详情失败' });
      });
    },
    // 重置搜索表单
    reset() {
      this.form = new Api_GET_EventsManagementLogisticsStatisticsReceptionDetailStatisticsQO();
      this.getData();
    },
    pickUpCarTimeChange(val) {
      if (val instanceof Array) {
        this.form.StartPickUpCarTime = this.pickUpCarTime[0];
        this.form.EndPickUpCarTime = this.pickUpCarTime[1];
      } else {
        this.form.StartPickUpCarTime = '';
        this.form.EndPickUpCarTime = '';
      }
      this.getData(this.form.Page);
    },
    deliverCarTimeChange(val) {
      if (val instanceof Array) {
        this.form.StartDeliverCarTime = this.deliverCarTime[0];
        this.form.EndDeliverCarTime = this.deliverCarTime[1];
      } else {
        this.form.StartDeliverCarTime = '';
        this.form.EndDeliverCarTime = '';
      }
      this.getData(this.form.Page);
    },
    // 导出表格
    exportData() {
      var that = this;
      this.buLoading = true;
      const tempUrl = `/api/excel`;
      const fileName = that.receptionDetail.departureStation + '--' + that.receptionDetail.arrivalStation + '接待详情' + '.xlsx';
      const params = {};
      params.ReportName = 'ReceptionEntryStatistics';
      const form = JSON.parse(JSON.stringify(that.form));
      form.DepartureStationFilter = that.receptionDetail.departureStation;
      form.ArrivalStationFilter = that.receptionDetail.arrivalStation;
      delete form.SkipCount;
      delete form.MaxResultCount;
      delete form.Page;
      params.ReceptionEntryInput = JSON.stringify(form);
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, params).then(res => {
        that.buLoading = false;
      }).catch(error => {
        that.buLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    },
    // 分页
    sizeChange: function(MaxResultCount) {
      this.form.MaxResultCount = MaxResultCount; // 每页显示条目数
      this.getData();
    },
    pageIndexChange(currentPage) {
      this.getData(currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>

</style>

